<template>
  <view class="giants-container">
  <!-- 底部部分：名字导航标签 -->
  <view class="names-section">
      <scroll-view 
        class="names-scroll" 
        scroll-x 
        :scroll-into-view="'name-' + currentGiantIndex" 
        scroll-with-animation
      >
        <view 
          class="name-item"
          v-for="(giant, index) in giantsList" 
          :key="index"
          :id="'name-' + index"
          :class="{ active: currentGiantIndex === index }"
          @tap="selectGiant(index)"
        >
          {{ giant.name }}
        </view>
      </scroll-view>
    </view>
    <!-- 主要内容区：人物头像和详情 -->
    <view class="main-content">
      <view class="giant-portrait-container">
        <swiper
          class="giant-swiper"
          :current="currentGiantIndex"
          @change="handleSwiperChange"
          circular
          indicator-dots
          autoplay
        >
          <swiper-item v-for="(giant, index) in giantsList" :key="index">
            <image :src="url('p', giant.avatar, 'png')" class="giant-portrait" mode="aspectFill" @tap="goToDetail"></image>
          </swiper-item>
        </swiper>
      </view>

      <view class="giant-info">
        <view class="giant-name">{{ giantsList[currentGiantIndex].name }}</view>
        <view class="giant-title">{{ giantsList[currentGiantIndex].title }}</view>
        <view class="giant-description">{{ giantsList[currentGiantIndex].description }}</view>
        <view class="view-more-btn" @tap="goToDetail">
          查看更多成就
        </view>
      </view>
    </view>

  
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useCounterStore } from '@/stores/counter';
const st = useCounterStore();
const url = $url;

// 当前选中的物理学家索引
const currentGiantIndex = ref(0);

// 物理学家数据
const giantsList =st.giantsList;

// 处理滑动事件
const handleScroll = (e) => {
  // 根据滚动位置计算当前选中的物理学家
  // 这里可以根据需要完善实现逻辑
};

// 处理轮播图切换事件
const handleSwiperChange = (e) => {
  currentGiantIndex.value = e.detail.current;
};

// 选择物理学家
const selectGiant = (index) => {
  currentGiantIndex.value = index;
};

// 跳转到详情页
const goToDetail = () => {
  uni.navigateTo({
    url: `/pages/other/physicsGiant/detail?id=${currentGiantIndex.value}`
  });
};

// 监听索引变化，确保滚动到正确位置
watch(currentGiantIndex, (newIndex) => {
  // 可以在这里添加额外的滚动控制逻辑
});
</script>

<style lang="scss" scoped>
.giants-container { background: url(https://epoch.jxksd.top/mo/images/dbg.png) no-repeat top
  center/cover;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.page-title {
  text-align: center;
  font-size: 36rpx;
  margin-bottom: 30rpx;
  color: #333;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.giant-portrait-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.giant-swiper {
  width: 100%;
  height: 600rpx;
}

.giant-portrait {
  width: 400rpx;
  height: 520rpx;
  border-radius: 12rpx;
  border: 4rpx solid #d0c6a9;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: block;
}

.giant-info {
  width: 100%;
}

.giant-name {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12rpx;
  color: #333;
}

.giant-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
  color: var(--td-brand-color);
}

.giant-description {
  font-size: 28rpx;
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 30rpx;
  color: #333;
}

.view-more-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: var(--td-brand-color);
  color: #fff;
  text-align: center;
  border-radius: 40rpx;
  margin: 20rpx auto;
  font-size: 32rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx var(--td-brand-color);
}

.giant-achievements {
  display: none; /* 隐藏成就部分 */
  margin-top: 10rpx;
}

/* 底部名字导航标签样式 */
.names-section {
  height: 120rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  overflow: hidden;
}

.names-scroll {
  height: 100%;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.name-item {
  display: inline-block;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  text-align: center;
  color: #666;
  transition: all 0.3s;
  
  &.active {
    color:var(--td-brand-color);
    font-weight: bold;
    font-size: 36rpx;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 6rpx;
      background-color:var(--td-brand-color);
      border-radius: 3rpx;
    }
  }
}
</style> 